<template>
  <div class="screen-container">

    
    <labelNavigation></labelNavigation>

    <!-- 下拉菜单 -->
    <div class="menu-container">
      <button class="menu-show" @click="menuShow=true">
        {{Grade}}班级
        <i class="el-icon-arrow-down" style="font-size: 1.2rem;"></i>
      </button>
      <div v-if="menuShow" class="menu-not-show"  @mouseenter="menuShow=true" @mouseleave="menuShow=false">
        <button :key="index" v-for="(item,index) in GradeList" @click="GradeName(index)" class="menu-each" :class="{menuEachShow:index == curIndex}">{{item}}班级</button>
      </div>
    </div>
    <!-- 图形展示区 -->
    <div class="screen-body">
      <!-- 左侧图形 -->
      <section class="screen-left">
        <!-- 导航信息 -->
        <div class="top">
          <span class="top-left">︱</span>
          <span class="top-middle">成长报告完成情况分布</span>
            <button @click="grow()" class="top-right">查看更多</button>
        </div>
        <!-- ring图形 -->
        <!-- :key="new Date().getTime()" 子组件重新渲染 -->
        <ring :galleryId="this.Grade" ref="ringUpData" v-if="tableShow"></ring>

      </section>

      <!-- 右侧图形 -->
      <section class="screen-right">
        <!-- 导航信息 -->
        <div class="top">
          <span class="top-left">︱</span>
          <span class="top-middle">成长报告完成情况分布</span>
          <button @click="details()" class="top-right">查看更多</button>
        </div>
        <!-- column图形1 -->
        <oneColumn :galleryId="this.Grade" ref="ringUpData" v-if="tableShow"></oneColumn>
        <!-- column图形2 -->
        <twoColumn :galleryId="this.Grade" ref="ringUpData" v-if="tableShow"></twoColumn>
      </section>
    </div>


    
  </div>
</template>


<script>
import labelNavigation from '../components/background/labelNavigation5'
import ring from './charts/ring'
import oneColumn from './charts/oneColumn';
import twoColumn from './charts/twoColumn';
import { getGrade } from "@/api/statistical/grow";

export default {
  components: {
    labelNavigation,
    ring,
    oneColumn,
    twoColumn,
  },
  data() {
    return {
      // 下拉菜单
      GradeList: [],
      curIndex: 99,
      menuShow: false,
      tableShow: true,
      Grade: '',
    }
  },
  created() {
    this.getGradeList()
  },  
  methods: {
    grow() {
      // '/grow'
      this.$router.push({
        path: '/grow',
        query: { galleryId: this.Grade }
      })
      
    },
    details() {
      this.$router.push({
        path: '/details',
        query: { galleryId: this.Grade }
      })
    },  

    GradeName(index){
      this.curIndex = index
      this.Grade = this.GradeList[index]
      // console.log(this.Grade, 'Grade')
      
      // 重新加载子组件ring
      // this.$refs.ringUpData.getclasslist() 调用子组件方法
      this.tableShow = false
      this.$nextTick(function() {
        this.tableShow = true
      }) 
    },

    // 获取所带班级及在班级中的岗位
    async getGradeList() {
      const res = await getGrade()
      // console.log(res, 'getGradeList')
      for (const key in res.data) {
        this.GradeList.push(
          res.data[key]
        )
      }
      this.Grade = this.GradeList[this.GradeList.length-1]
      // console.log(this.Grade, 'Grade')
      // console.log(this.GradeList, 'GradeList')

      // 重新加载子组件ring
      this.tableShow = false
      this.$nextTick(function() {
        this.tableShow = true
      }) 
    },
  }
}
</script>

<style scoped>

/* 下拉菜单 */
.menu-container {
  margin: 0rem 16rem;

}

/* 下拉菜单显示样式 */
.menu-show {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color:#888;
  border: 0;
  background: #fff;
  font-size: 1.2rem;
}
/* 下拉菜单内容 */
.menu-not-show {
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: 5px;
  z-index: 3;
  color:#888888;
  
  background: #f7f8fa;
}
.menu-each {
  border: 0;
  background:#fff;
  font-size: 1.2rem;
  padding: 0.5rem 0.75rem;
}
.menuEachShow {
  color: #fff;
  font-size: 1.2rem;
  background: #7c0000;
}

/* 图形展示区 */
.screen-body {
  display: flex;
  margin: 1.25rem 13.75rem;
  flex-direction: row;
}

/* 左侧图形 */
.screen-left {
  display: flex;
  flex-direction: column;
  margin: 2.5rem;
  border: 2px solid #f5f5f5;
  width: 31.25rem;
  height: 37.5rem;
}

/* 导航信息 */
.top {
  margin-top: 1rem;
}

.top .top-left {
  font-weight: bold;
  margin-left: 1rem;  
  margin-right: .75rem;  
  color: rgb(135, 22, 22);
}

.top .top-right {
  float: right;
  padding: 0;
  font-size: 1rem;
  margin-right: 2.5rem;
  background: #ffffff;
  border: 0 solid #ffffff;
  color: rgb(135, 22, 22);
}

/* 右侧图形 */
.screen-right {
  display: flex;
  flex-direction: column;
  margin: 2.5rem;
  border: 2px solid #f5f5f5;
  height: 37.5rem;
}

</style>
